<template>
	<NavBar :obj="{ title: title, color: '#fff', backgroundColor: 'transparent' }" />
	<image :src="theme?.bg?.my_order_info" mode="widthFix" class="img-top"></image>

	<view class="fill">
		<view class="top flex items-center">
			<view class="vertical flex flex-col justify-between">
				<view class="tips">{{ info.account?.title }}余额</view>
				<view class="val">{{ info.account?.balance }}</view>
			</view>
			<view class="vertical flex flex-col justify-between">
				<view class="tips">{{ info.method?.title }}</view>
				<view class="val">{{ info.method?.balance }}</view>
			</view>
			<view class="vertical flex flex-col justify-between">
				<view class="tips">当前价格</view>
				<view class="val">{{ info.factor?.price }}</view>
			</view>
		</view>

		<view class="main">
			<u-row class="main_li">
				<u-col span="3" class="lebel">交易类型</u-col>
				<view class="flex-1">
					<up-radio-group v-model="formRef.type_id" :activeColor="theme.themeColor" placement="row" style="gap: 50rpx">
						<block v-for="(item, index) in info.type" :key="index">
							<up-radio :label="item.title" :name="item.id" labelColor="#000" labelSize="28rpx"></up-radio>
						</block>
					</up-radio-group>
				</view>
			</u-row>

			<u-row class="main_li">
				<u-col span="3" class="lebel">交易单价</u-col>
				<view class="flex-1">
					<InputAmount v-model="formRef.price" :float="true" customClass="inp" customPlaceClass="place-inp" placeholder="请填写交易单价" />
				</view>
			</u-row>

			<u-row class="main_li">
				<u-col span="3" class="lebel">交易数量</u-col>
				<view class="flex-1">
					<InputAmount v-model="formRef.amount" customClass="inp" customPlaceClass="place-inp" :placeholder="'请填写交易数量，最低' + info.factor?.trade_min + '个起'" />
				</view>
			</u-row>

			<u-row class="main_li">
				<u-col span="3" class="lebel">交易总价</u-col>
				<view class="flex-1">
					<view class="inp">￥{{ total }}</view>
				</view>
			</u-row>
			<u-row class="main_li" v-if="formRef.type_id == 1 && info.factor?.trade_cost">
				<u-col span="3" class="lebel">手续费</u-col>
				<view class="flex-1">
					<view class="inp">{{ info.factor?.trade_cost * 100 }}%</view>
				</view>
			</u-row>
		</view>

		<view class="confirm" @click="submit">发布</view>

		<Password v-model:show="passwordShow" @confirm="confirm" />
	</view>
</template>

<script setup>
	import { ref, inject, reactive, computed } from 'vue';
	import { port, goUrl, hint, imgUrl, loading, closeLoading } from '/service/port';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import Password from '/components/Password.vue';
	import InputAmount from '/components/InputAmount.vue';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();
	const title = ref('');
	const info = ref({});
	const passwordShow = ref(false);
	const formRef = ref({
		account: '',
		type_id: '1',
		price: '',
		amount: '',
		pay_password: ''
	});

	const total = computed(() => {
		return (formRef.value.amount * formRef.value.price).toFixed(2);
	});

	const submit = () => {
		if (!formRef.value.price) {
			hint('请填写交易单价');
			return false;
		}
		if (!formRef.value.amount) {
			hint('请填写交易数量');
			return false;
		}

		passwordShow.value = true;
	};

	onLoad((e) => {
		title.value = e.title;
	});

	onShow(() => {
		reload()
		getTradeOnlineIndex();
	});

	async function getTradeOnlineIndex() {
		let res = await port('getTradeOnlineIndex');
		info.value = res.data;

		formRef.value.type_id = res.data.type[0].id;
		formRef.value.account = res.data.account.type;
	}

	async function confirm(e) {
		formRef.value.pay_password = e;
		passwordShow.value = false;
		loading();
		try {
			let res = await port('saveTradeOnline', formRef.value);

			setTimeout(() => {
				closeLoading();
				hint(res.msg);
			
				goUrl('/pages/tradeOnline/my-record');
			}, 200);
		} catch (error) {
			console.log(error);
			hint(error.msg);
			formRef.value.pay_password = '';
			passwordShow.value = true;
		}
	}

	function reload() {
		formRef.value = {
			account: '',
			type_id: '1',
			price: '',
			amount: '',
			pay_password: ''
		};
	}
</script>

<style scoped lang="scss">
	::v-deep {
		page {
			background-color: #f0f0f0;
		}
	}
	.img-top {
		width: 100%;
		height: 350rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.fill {
		position: relative;
		margin: 30rpx;
		.top {
			margin-left: 10rpx;
			.vertical {
				width: 50%;
				.tips {
					font-weight: 400;
					font-size: 24rpx;
					color: #eee;
				}
				.val {
					font-weight: 500;
					font-size: 42rpx;
					color: #fff;
				}
			}
		}
		.main {
			background: #fff;
			border-radius: 20upx;
			margin-top: 40rpx;
			.main_li:last-child {
				border-bottom: none !important;
			}
			.main_li {
				padding: 30rpx 0;

				display: flex;
				flex: 1 2 0%;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1upx solid #eee;
				.lebel {
					color: #333333;
					font-size: 28upx;
				}
				.inp {
					color: #000;
					font-size: 28upx;
				}
				.place-inp {
					color: #bdbdbd;
				}
			}
		}

		.method-box {
			margin-top: 34rpx;
			.title {
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
				margin-bottom: 24rpx;
				margin-left: 5rpx;
			}
		}
		.pay_mode {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 0 24rpx;
			.u-checkbox-group {
				display: flex !important;
				flex-direction: column !important;
				justify-content: space-between !important;
				gap: 0 !important;
			}
			.u-checkbox {
				padding: 30rpx 0 !important;
				border-top: 1rpx solid #eee;
				margin: 0;
				&:first-child {
					border: none;
				}
			}

			.item {
				.icon {
					width: 44rpx;
					height: 44rpx;
				}
				.top {
					// margin-top: 5rpx;
					align-items: start;
					margin-left: 15rpx;
					.text {
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
					}
					.bom {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;

						> text {
							color: #fb3204;
						}
					}
				}
			}
		}
		.confirm {
			margin-top: 86upx;
			color: #fff;
			background: $theme-bg-btn-color;
			text-align: center;
			padding: 20rpx 0;
			border-radius: 88upx;
		}
	}
</style>
